<template>
    <div class="product">
        <div class="top">
            <!-- <img :src="detail.picture" alt=""> -->
            <mt-swipe :auto="4000">
                <mt-swipe-item>
                    <img :src="img[0]" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="img[1]" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="img[2]" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img :src="img[3]" alt="">
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="explain">
            <div class="title">
                <span>{{detail.title}}</span>
            </div>
            <div class="price clearfix">
                <p class="one fl">
                    <span>￥</span>
                    <span>{{detail.price}}</span>
                    <span>元/成人</span>
                </p>
                <p class="two fl">{{detail.childPrice}}元/儿童</p>
                <p class="fr">已售：{{detail.soldNum}}</p>
            </div>
        </div>
        <div class="line"></div>
        <div class="logos">
            <img src="../../assets/imgs/tour/logo.png" alt="">
        </div>
        <div class="line"></div>
        <div class="list">
            <ul>
                <li class="" v-for="(item,index) in buttonArr" :key="index" :class="{currt : activeBtn == index}" @click="goAnchor('#anchor-'+index,index)">{{item}}</li>
                <!-- <li>行程介绍</li>
                <li>费用明细</li> -->
            </ul>
        </div>
        <!-- <div class="logos">
                <img src="../../assets/imgs/tour/p-three.png" alt="">
        </div> -->
        <div class="logo" id="anchor-0" v-html="detail.tourDetails"></div>
        <div class="logo" id="anchor-1" v-html="detail.tourRoute"> </div>
        <div class="logo" id="anchor-2" v-html="detail.expenseKnow"> </div>
        <div class="order" v-show="isCshow=='false'">
            <div class="title">
                <div class="fork" @click="isCshow='true'">
                    <img src="../../assets/imgs/tour/fork.png">
                </div>
                <p class="word">{{detail.title}}</p>
                <p class="prics">
                    <span>￥</span>
                    <span>{{detail.price}}</span>
                    <span>起/每份</span>
                </p>
            </div>
            <div class="time">
                <div class="choice">
                    <p>选择时间</p>
                    <ul class="clearfix">
                        <!-- <li class="fl divtime" v-for="(item,index) in list" @click="fn(index)" :class="{time:ide ==index}">{{item}}</li> -->
                        <li class="fl divtime" v-for="(item,index) in priceList" @click="selectData(item.priceDate,item.price,item.childPrice,index)" :class="{'time':ide ==index}" v-if='index<3'>{{selData(item.priceDate)}}</li>
                        <li class="fl" @click="isDshow='false',ide=4">其他日期</li>
                    </ul>
                </div>
                <div class="start" v-show="ide!=5">
                    <p>出发时间</p>
                    <ul class="clearfix">
                        <li class="fl currt">{{cftime}}</li>
                    </ul>
                </div>
            </div>
            <!-- <div class="friends">
                <p>出行亲友</p>
                <div class="txcash clearfix">
                    <div class="cashnumber fl">成人</div>
                    <div class="checknum fl">
                        <span @click="checknum=checknum-1" v-show="checknum>0">-</span>
                        <span v-show="checknum<=0">-</span>
                        <span class="nub">{{checknum}}</span>
                        <span @click="checknum=checknum+1">+</span>
                    </div>
                    <div class="cashnumber fl">儿童</div>
                    <div class="checknum fl">
                        <span @click="checknums=checknums-1" v-show="checknums>0">-</span>
                        <span v-show="checknums<=0">-</span>
                        <span class="nub">{{checknums}}</span>
                        <span @click="checknums=checknums+1">+</span>
                    </div>
                </div>
                <p class="tips">
                    儿童年龄不得超过12岁（不含），超龄将影响出行
                </p>
            </div> -->
            <div class="btns" @click="gotoOrderDtl(proId.tourId)">
                立即订购
            </div>
        </div>
        <div class="slectTime" v-show="isDshow=='false'">
            <div class="title">
                <p>选择时间</p>
                <div class="fork" @click="isDshow='true'">
                    <img src="../../assets/imgs/tour/fork.png" alt="">
                </div>
            </div>
            <div class="year clearfix">
                <!-- <div class="fork fl">
                    <img src="../../assets/imgs/tour/up.png" alt="">
                </div> -->
                <div class="allMounth fl" v-for="(item , index) in dateArray" @click="selectMounth(index)">
                    <span :class="{'active':select == index}">{{item.mounth}}月</span>
                    <!-- <span>{{item.price}}起</span> -->
                </div>
                <!-- <div class="forks fr">
                    <img src="../../assets/imgs/tour/next.png" alt="">
                </div> -->
            </div>
            <div class="day">
                <ul class="cliarfix">
                    <cell-month @changetype="changetypes" v-for="(item,index) in classArray" :dateData="item" :day="item[0].priceDate" v-if=" index == selectMonth" :key="index"> </cell-month>
                </ul>
            </div>
        </div>
        <div class="btn clearfix">
            <p class="fl"><a style="display:block;width:100%;height:100%;color:#000" href="tel:4006666688">联系我们</a></p>
            <p class="fl currt" @click="isCshow='false'">立即订购</p>
        </div>
    </div>
</template>

<script>
import cellMonth from '@/common/cell-month'
import http from "@/assets/js/axios";
import httpr from "@/assets/js/axiosr";
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { Toast } from 'mint-ui';
import { Swipe, SwipeItem } from 'mint-ui';
export default {

    data() {

        return {
            isAshow: false,
            isBshow: false,
            isCshow: false,
            isDshow: false,
            buttonArr: ["产品推荐", "行程介绍", "费用明细"],
            activeBtn: 0,
            checknum: 1,
            checknums: 1,
            userToken: '',
            detail: '',
            select: 0,
            priceList: [],
            // daysData: [],
            dateData: '',
            img: [],
            list: [],
            proId: {
                tourId: ''
            },
            cftime: '8:00',
            seleDate: '', //默认选择第一个
            list: [], //默认选择第一个
            ide: 4,  //默认选择第一个
            dateArray: [],
            selectMonth: 0,
            classArray: [],
            queryParam: {
                // orgId: 0,
                // organizationCode: "string",
                page: 0,
                rangeType: "onDay",
                runTypeEnum: "group",
                size: 5
            }
        }
    },
    components: {
        cellMonth,
    },
    created() {
        this.loginNow()
    },
    mounted() {
        if (this.ide == 4) {
            sessionStorage.removeItem('speData')
        }

        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        let poctId = this.$route.query.id;
        // console.log(poctId);
        this.proId.tourId = poctId
        // if (!this.userToken) {
        //     this.$router.push('/index')
        // }
        var dateObj = {};
        for (var i = 1; i <= 3; i++) {
            dateObj = this.getDate(i); //把返回的日期赋值给对象
            this.list.push(dateObj); //把对象添加到数组里面，然后渲染到页面
        }
        // this.onChangeType()
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        goAnchor(selector, index) {
            this.activeBtn = index;
            this.$el.querySelector(selector).scrollIntoView()
        },
        changetypes(type) { // type是子组件$emit传递的参数
            this.isDshow = type.type
            this.cftime = type.ftime
        },
        // 选择日期开始
        selectData(spes, price, cprc, index) {
            sessionStorage.setItem('speData', spes)
            sessionStorage.setItem('price', price)
            sessionStorage.setItem('childPrice', cprc)
            this.ide = index;
            let ftime = sessionStorage.getItem('speData')
            this.cftime = ftime
        },
        selData(itms) {
            let itema = itms.split('-')
            return itema[1] + '月' + itema[2] + '日';
        },
        //选择日期结束
        //价格日历开始
        loadData() {
            let jsonArray = this.priceList
            let monthArray = [];
            for (var i in jsonArray) {
                var data = jsonArray[i];
                var dateDict = { 'mounth': data.priceDate.substring(0, data.priceDate.length - 3) };
                monthArray.push(dateDict);
            }
            //数组去重,获取有几个月
            var hash = {};
            monthArray = monthArray.reduce(
                function (item, next) {
                    hash[next.mounth] ? '' : hash[next.mounth] = true && item.push(next);
                    return item;
                }, []
            )
            this.$data.dateArray = monthArray;
            // console.log(monthArray);
            // console.log(this.dateArray[0].mounth);
            sessionStorage.setItem('yearmonth', this.dateArray[0].mounth)
            //数据分组
            let classArray = [];
            for (var j in monthArray) {
                var newArray = new Array();
                for (var i in jsonArray) {
                    var data = jsonArray[i];
                    if (data.priceDate.substring(0, data.priceDate.length - 3) == monthArray[j].mounth) {
                        newArray.push(data)
                    }
                }
                classArray.push(newArray);
            }
            this.$data.classArray = classArray;
            let mont = sessionStorage.getItem('yearmonth')
            let lista = this.list[0].split('月')
            let listb = lista[1].split('日')
        },
        selectMounth(index) {
            this.$data.selectMonth = index;
            this.select = index;
            sessionStorage.setItem('yearmonth', this.dateArray[index].mounth)
        },
        //价格日历结束
        //获取年月
        fn(index) {
            this.ide = index;
            this.seleDate = document.getElementsByClassName('divtime')[index].innerHTML; //获取当前选中的时间
            let mont = sessionStorage.getItem('yearmonth')
            let one = this.seleDate.split('月')
            let two = one[1].split('日')
            let three = mont.split('-')
            if (Number(one[0]) > Number(three[1])) {
                let mont = sessionStorage.getItem('yearmonth')
                let four = mont.split('-')
                let fours = Number(four[1]) + 1
                let five = four[0] + '-' + fours
                sessionStorage.setItem('speData', five + '-' + two[0])
            } else {
                sessionStorage.setItem('speData', mont + '-' + two[0])
            }
        },
        getDate(n) {
            var ss = 24 * 60 * 60 * 1000; //一天的毫秒数86400
            var timestamp = new Date().getTime(); //获取当前时间戳
            var date1 = new Date(ss * n + timestamp) //加上n天的国际标准日期
            var newTime = date1.toLocaleString(); //把日期转换成2018/6/4 下午10:45:19 格式
            var arr = newTime.split(" "); //把2018/6/4提取出来
            var arr2 = arr[0].split('/'); //把年月日数字单独提出来
            return arr2[1] + '月' + arr2[2] + '日'; //拼接成我们需要的格式返回
            // return arr2[1] + '-' + arr2[2]; //拼接成我们需要的格式返回
        },
        loginNow: async function () {
            // console.log(this.proId);
            const res = await httpr.post('tour_search/detail', this.proId)
            // console.log(res);
            if (res.data.code == 100) {
                // Toast({ message: res.data.message, duration: 1000 })
                this.detail = res.data.data
                this.priceList = res.data.data.tourPriceList
                this.img = res.data.data.imagesList
                this.loadData();
            } else {
                Toast({ message: res.data.message, duration: 1000 })
            }
        },
        gotoOrderDtl: function (pid) {
            let time = sessionStorage.getItem('speData')
            if (!this.userToken) {
                Toast({ message: '当前未登录，请登录！', duration: 1000 })
                this.$router.push('/login')
            } else {
                if (time) {
                    this.$router.push({ path: '/tourOrder', query: { 'id': pid } })
                } else {
                    Toast({ message: '请选择出行日期后下单', duration: 1000 })
                }
            }


            // Toast({ message: res.data.message, duration: 1000 })
        }
    }
}
</script>

<style lang="stylus" scoped>
.product {
    height: 100%;

    .time {
        width: 100%;
        // height: 175px;
    }

    .top {
        width: 100%;
        height: 175px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .line {
        width: 100%;
        height: 12px;
        background: rgba(240, 240, 240, 1);
    }

    .explain {
        padding: 0 10px;

        .title {
            margin-top: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .price {
            padding: 10px 0;
            color: #999;
            font-size: 12px;

            .one {
                span:nth-child(1) {
                    color: #FF7E00;
                }

                span:nth-child(2) {
                    color: #FF7E00;
                    font-size: 16px;
                }
            }

            .two {
                padding-left: 10px;
                color: #FF7E00;
            }
        }
    }

    .logos {
        width: 100%;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .logo {
        width: 100%;

        // height: 44kpx;
        p {
            width: 100%;

            img {
                width: 750px;
                height: 100%;
            }
        }
    }

    .logo >>> img {
        width: 100%;
    }

    .list {
        ul {
            li {
                padding: 10px 0;
                text-align: center;
                float: left;
                width: 33.3%;
                color: #333;
                font-size: 15px;
            }

            .currt {
                border-bottom: 2px solid #8FC31F;
            }
        }
    }

    .recommend {
        margin-bottom: 100px;

        .title {
            text-align: center;
            font-size: 18px;
            font-family: PingFangSC-Regular;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .more {
            text-align: center;
            font-size: 18px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
        }

        .lists {
            width: 100%;

            ul {
                margin: 5px;

                li {
                    margin: 8px;
                    width: 165px;
                    border: 1px solid #999;

                    .img {
                        width: 100%;
                        height: 100px;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .tit {
                        padding: 5px;
                        font-size: 12px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(51, 51, 51, 1);
                    }

                    .proce {
                        padding: 5px;
                        font-size: 12px;
                        font-family: PingFangSC-Regular;
                        font-weight: 500;
                        color: rgba(255, 126, 0, 1);

                        p:nth-child(1) {
                            span:nth-child(2) {
                                font-size: 16px;
                            }
                        }
                    }
                }
            }
        }
    }

    .order {
        padding: 10px;
        width: 100%;
        z-index: 95;
        position: fixed;
        bottom: 0px;
        height: 450px;
        background-color: #fff;

        .title {
            position: relative;

            .fork {
                position: absolute;
                top: 0px;
                right: 0px;
                width: 45px;
                height: 45px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .word {
                width: 320px;
                padding-top: 13px;
                font-size: 16px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .prics {
                padding: 10px 0;
                color: #999;
                font-size: 12px;

                span:nth-child(1) {
                    color: #FF7E00;
                }

                span:nth-child(2) {
                    color: #FF7E00;
                    font-size: 16px;
                }
            }
        }

        .time {
            width: 100%;

            .choice {
                margin-top: 20px;

                p {
                    font-size: 14px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                }

                ul {
                    li {
                        margin: 10px 5px;
                        width: 78px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        border: 1px solid #999;
                        border-radius: 5px;
                        font-size: 12px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: rgba(51, 51, 51, 1);
                    }

                    .time {
                        color: #fff;
                        background: #8FC31F;
                    }
                }
            }

            .start {
                margin-top: 20px;

                p {
                    font-size: 14px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                }

                ul {
                    li {
                        margin: 10px 5px;
                        // width: 78px;
                        padding: 0 10px;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        background: #8FC31F;
                        border-radius: 5px;
                        font-size: 16px;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        color: #fff;
                    }
                }
            }
        }

        .friends {
            p {
                font-size: 14px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
            }

            .txcash {
                width: 100%;
                height: 33px;
                line-height: 30px;
                font-size: 16px;
                margin-top: 10px;

                .cashnumber {
                    display: inline-block;
                    font-size: 16px;
                }

                .checknum {
                    text-align: center;
                    margin: 0 15px;
                    color: #999999;
                    border: 1px solid #999999;
                    border-radius: 5px;

                    span {
                        display: inline-block;
                        height: 100%;
                        padding: 0 8px;
                    }

                    .nub {
                        padding: 0 15px;
                        border-left: 1px solid #999;
                        border-right: 1px solid #999;
                    }
                }
            }

            .tips {
                margin-top: 5px;
                font-size: 14px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(255, 126, 0, 1);
            }
        }

        .btns {
            margin: 0 auto;
            margin-top: 50px;
            width: 330px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #8fc31f;
            border-radius: 10px;
            font-size: 19px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }
    }

    .slectTime {
        padding: 10px;
        width: 100%;
        z-index: 99;
        position: fixed;
        bottom: 0px;
        height: 450px;
        background-color: #fff;

        .title {
            position: relative;

            p {
                padding-top: 12px;
                text-align: center;
                font-size: 16px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
            }

            .fork {
                position: absolute;
                top: 0px;
                right: 0px;
                width: 45px;
                height: 45px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .year {
            .allMounth {
                padding: 0 10px;

                span {
                    padding-top: 20px;
                    // text-align: center;
                    font-size: 16px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                }

                span.active {
                    color: #8fc31f;
                }
            }

            .fork {
                position: absolute;
                top: 50px;
                left: 10px;
                width: 45px;
                height: 45px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .forks {
                position: absolute;
                top: 50px;
                right: 10px;
                width: 45px;
                height: 45px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .week {
            ul {
                margin-top: 20px;

                li {
                    width: 50px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    font-size: 16px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                }
            }
        }

        .day {
            ul {
                margin-top: 20px;

                li {
                    padding-top: 5px;
                    width: 50px;
                    height: 50px;
                    line-height: 20px;
                    text-align: center;
                    font-size: 14px;
                    font-family: PingFangSC-Regular;
                    font-weight: 300;
                    color: rgba(51, 51, 51, 1);
                    letter-spacing: -1px;

                    p:nth-child(2) {
                        font-size: 8px;

                        span:nth-child(1) {
                            color: #FF7E00;
                        }
                    }
                }

                .currt {
                    color: #fff;
                    background: rgba(255, 114, 0, 1);

                    p:nth-child(2) {
                        span:nth-child(1) {
                            color: #fff;
                            background: rgba(255, 114, 0, 1);
                        }
                    }
                }
            }
        }
    }

    .btn {
        position: fixed;
        bottom: 0px;
        font-size: 16px;
        text-align: center;
        width: 100%;
        border-top: 1px solid #999;
        z-index: 90;

        p {
            width: 50%;
            height: 50px;
            line-height: 50px;
            display: inline-block;
            background: #fff;
        }

        .currt {
            color: #fff;
            background: #8FC31F;
        }
    }
}
</style>
